<template>
    <div class="ranking">
        <router-link to="/login" id="toLogin"></router-link>
        <top-bar title="排行榜"></top-bar>
        <div class="rankingListTop">
            <div class="rankingList">
                <span class="rankingListMonth" @click="isPopChange">{{month}}月</span>
                <div v-if="Object.keys(data1).length>0&&data1.user.name" class="selfMsg">
                    <span class="headIcon"><img :src="data1.user.head_ico" alt=""></span>
                    <div class="user">
                        <span>{{data1.user.name}}</span>
                        <span>第{{data1.user.ranking}}</span>
                    </div>
                    <p class="rankingMsg">
                        <span>提成<span>{{data1.user.extract_money}}</span>元</span>
                        <span>业绩<span>{{data1.user.order_money}}</span>元</span>
                    </p>
                </div>
                <div v-if="Object.keys(data2).length>0&&data2.user.name" class="selfMsg">
                    <span class="headIcon"><img :src="data2.user.head_ico" alt=""></span>
                    <div class="user">
                        <span>{{data2.user.name}}</span>
                        <span>第{{data2.user.ranking}}</span>
                    </div>
                    <p class="rankingMsg">
                        <span style="line-height:3em"><span>{{data2.user.usernum}}</span>人</span>
                    </p>
                </div>
                <div v-if="Object.keys(data3).length>0&&data3.user.name" class="selfMsg">
                    <span class="headIcon"><img :src="data3.user.head_ico" alt=""></span>
                    <div class="user">
                        <span>{{data3.user.name}}</span>
                        <span>第{{data3.user.ranking}}</span>
                    </div>
                    <p class="rankingMsg">
                        <span style="line-height:3em"><span>{{data3.user.usernum}}</span>人</span>
                    </p>
                </div>
            </div>
        </div>
        <mu-card style="width: 100%; max-width: 92vw; margin: 0 auto;" :raised=true>
            <ul class="rankingType">
                <li class="rankingTypeList" @click="typeNum(0)">业绩提成</li>
                <li class="rankingTypeList" @click="typeNum(1)">有效客户</li>
                <li class="rankingTypeList" @click="typeNum(2)">注册用户</li>
            </ul>
        </mu-card>
        <div v-if="Object.keys(data1).length>0">
            <ul v-if="data1.list.length>0">
                <h3 style="width:92vw;margin:0 auto;font-size:18px;color:#333333;font-weight:100;line-height:3em">业绩提成</h3>
                <li v-for='(item,index) in data1.list' :key="index" style="width:92vw;margin:13px auto">
                    <span v-if="item.ranking==1" style="font-size:15px;color:#ffffff;position:relative;display:inline-block;vertical-align:middle;width:30px">
                        <img src="@/images/neitui/jiangbei.png" alt="" style="width:26px">
                        <span style="position: absolute;top: 0px;left:8px;line-height:1em">1</span>
                    </span>
                    <span v-else style="font-size:25px">
                        <span style="display:inline-block;width: 30px">{{item.ranking}}</span>
                    </span>
                    <span class="headIcon">
                        <img :src="item.head_ico" alt="">
                    </span>
                    <span style="display:inline-block;margin-left:10px">{{item.name}}</span>
                    <p class="rankingMsg">
                        <span>提成<span>{{item.extract_money}}</span>元</span>
                        <span>业绩<span>{{item.order_money}}</span>元</span>
                    </p>
                </li>
            </ul>
            <div style="text-align:center;padding-top:50px" v-else>
                <img src="@/images/neitui/21.png" alt="" style="width:275px">
                <p style="margin-top:10px">排行榜正在统计中...</p>
            </div>
        </div>
        <div v-if="Object.keys(data2).length>0">
            <ul v-if="data2.list.length>0">
                <h3 style="width:92vw;margin:0 auto;font-size:18px;color:#333333;font-weight:100;line-height:3em">有效用户</h3>
                <li v-for='(item,index) in data2.list' :key="index" style="width:92vw;margin:13px auto">
                    <span v-if="item.ranking==1" style="font-size:15px;color:#ffffff;position:relative;display:inline-block;vertical-align:middle;width:30px">
                        <img src="@/images/neitui/jiangbei.png" alt="" style="width:26px">
                        <span style="position: absolute;top: 0px;left:8px;line-height:1em">1</span>
                    </span>
                    <span v-else style="font-size:25px">
                        <span style="display:inline-block;width: 30px">{{item.ranking}}</span>
                    </span>
                    <span class="headIcon">
                        <img :src="item.head_ico" alt="">
                    </span>
                    <span style="display:inline-block;margin-left:10px">{{item.name}}</span>
                    <p class="rankingMsg">
                        <span style="line-height:3em"><span>{{item.usernum}}</span>人</span>
                    </p>
                </li>
            </ul>
            <div style="text-align:center;padding-top:50px" v-else>
                <img src="@/images/neitui/11.png" alt="" style="width:275px">
                <p style="margin-top:10px">暂无数据</p>
            </div>
            
        </div>
        <div v-if="Object.keys(data3).length>0">
            <ul v-if="data3.list.length>0">
                <h3 style="width:92vw;margin:0 auto;font-size:18px;color:#333333;font-weight:100;line-height:3em">注册用户</h3>
                <li v-for='(item,index) in data3.list' :key="index" style="width:92vw;margin:13px auto">
                    <span v-if="item.ranking==1" style="font-size:15px;color:#ffffff;position:relative;display:inline-block;vertical-align:middle;width:30px">
                        <img src="@/images/neitui/jiangbei.png" alt="" style="width:26px">
                        <span style="position: absolute;top: 0px;left:8px;line-height:1em">1</span>
                    </span>
                    <span v-else style="font-size:25px">
                        <span style="display:inline-block;width: 30px">{{item.ranking}}</span>
                    </span>
                    <span class="headIcon">
                        <img :src="item.head_ico" alt="">
                    </span>
                    <span style="display:inline-block;margin-left:10px">{{item.name}}</span>
                    <p class="rankingMsg">
                        <span style="line-height:3em"><span>{{item.usernum}}</span>人</span>
                    </p>
                </li>
            </ul>
            <div style="text-align:center;padding-top:50px" v-else>
                <img src="@/images/neitui/11.png" alt="" style="width:275px">
                <p style="margin-top:10px">暂无数据</p>
            </div>
        </div>
        <pop-time-chioce @year="yearChange" @month="monthChange" v-if="isPop" @isPop1="req" @isPop="none" :year1="year" :month1="month"></pop-time-chioce>

    </div>
</template>

<script>
    import request from '@/request/index.js'
    import topBar from '@/components/common/topBar1.vue'
    import popTimeChioce from '@/components/common/popTimeChioce.vue'
    export default {
        name: "rankingList",
        components:{
            topBar,
            popTimeChioce
        },
        data() {
            return {
                token:'',
                month:'',
                year:'',
                isPop:false,
                data1:{},
                data2:{},
                data3:{},
                typeNumber:0,
            };
        },
        watch:{
            typeNumber(newVal,oldVal){
                document.getElementsByClassName('rankingTypeList')[oldVal].style.color="#333333";
                document.getElementsByClassName('rankingTypeList')[newVal].style.color="#55A9FF";
                this.data1={};
                this.data2={};
                this.data3={};
                if(newVal==0){
                    request.getRankings(this);
                }else if(newVal==1){
                    request.getUsersranking(this);
                }else if(newVal==2){
                    request.getUserRanking(this);
                }

　　　　　　},
        },
        methods:{
            typeNum:function(i){ 
                this.typeNumber=i;
            },
            isPopChange:function(){
                this.isPop=true;
            },
            yearChange:function(val){
                this.year=val;
            },
            monthChange:function(val){
                this.month=val;
            },
            none:function(){
                this.isPop=false;
            },
            req:function(){
                this.isPop=false;
                if(this.typeNumber==0){
                    request.getRankings(this);
                }else if(this.typeNumber==1){
                    request.getUsersranking(this);
                }else if(this.typeNumber==2){
                    request.getUserRanking(this);
                }
            }
        },
        created(){
        },
        mounted(){
             const loading = this.$loading({
                    // ...options
                    color:'#55A9FF',
                    overlayColor:'rgba(0,0,0,.5)',
                    className: 'loadingStyle',
                });
            if(this.$route.query.token){
                this.$cookie.set('token',this.$route.query.token,7);
                this.token=this.$cookie.get('token');
            }else{
                if(this.$cookie.get('token')){
                    this.token=this.$cookie.get('token');
                }
                else{
                    document.getElementById('toLogin').click();
                }
            }
            var date=new Date;
            this.year=date.getFullYear(); 
            this.month=date.getMonth()+1;
            request.getRankings(this,loading);
            document.getElementsByClassName('rankingTypeList')[0].style.color="#55A9FF";
        }
    }
</script>

<style scoped lang="scss">
.ranking{
    .rankingTypeList{

    }
    .headIcon{
        margin-left: 15px;
        width:45px;
        height:45px;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        img{
            height: 100%;
            width:100%;
        }
    }
    .rankingMsg{
        float:right;
        >span{
            display: block;
            text-align: right;
            font-size:13px;
            >span{
                color:#E8A31C;
                font-size:15px
            }
        }
    }
}
    .rankingListTop{
        background:#55A9FF;
        padding-bottom: 30px;
    }
    .rankingList{
        width: 92vw;
        margin: 0 auto;
        .selfMsg{
            >div{
                display: inline-block;
            }
            .user{
                color:#ffffff;
                vertical-align: middle;
                margin-left: 10px;
                span{
                    display: block;
                }
            }
            .rankingMsg{
                color:#ffffff;
            }
        }
    }
    .rankingListMonth{
        font-size: 24px;
        color: #ffffff;
        line-height: 3em;
    }
    .rankingType{
        display:flex;
        justify-content: space-around;
        li{
            width:30%;
            text-align: center;
            line-height: 50px;
            color:#333333;
            font-size:15px;
        }
    }
</style>
